<template>
  <div id="app">
    <router-view
      v-loading="isLoading"
      :element-loading-text="loadingText"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      element-loading-lock="true"/>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'App',
  metaInfo() {
    return {
      title: this.setting.title || '后台管理',
      meta: [
        { charset: 'utf-8' },
        { vmid: 'keywords', name: 'keywords', content: this.setting.keywords },
        {
          vmid: 'description',
          name: 'description',
          content: this.setting.description
        }
      ]
    }
  },
  computed: {
    ...mapState({
      setting: state => state.user.setting,
      isLoading: state => state.app.isLoading,
      loadingText: state => state.app.loadingText
    })
  },
  watch: {
    $route(newValue) {
      const activeMenu = newValue.meta.activeMenu || ''
      if (String(activeMenu) === '') {
        this.$store.commit('SEARCH_DATA', null)
      }
    }
  },
  methods: {
    getHeight() {
      let winWidth = 0
      let winHeight = 0
      if (window.innerWidth) {
        winWidth = window.innerWidth
      } else if ((document.body) && (document.body.clientWidth)) {
        winWidth = document.body.clientWidth
      }
      if (window.innerHeight) {
        winHeight = window.innerHeight
      } else if ((document.body) && (document.body.clientHeight)) {
        winHeight = document.body.clientHeight
      }
      if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth) {
        winHeight = document.documentElement.clientHeight
        winWidth = document.documentElement.clientWidth
      }
      return {
        winWidth,
        winHeight
      }
    }
  }
}
</script>

<style lang="scss">
  @import "./assets/base";
  .pagination-container1{
    padding: 4px 16px !important;
  }
  .pswp{
    z-index: 999999 !important;
  }
  .custom .el-dialog__body{
    padding: 2px 17px;
  }
  .el-date-editor .el-range-separator{
    width: 6%;
  }
</style>
